<template>
  <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
    <el-form-item label="所属服务组" prop="department">
      <el-cascader
        :clearable="true"
        filterable
        v-model="form.department"
        :options="groups"
        :props="props"
        placeholder="请选择"
        @change="handlePartChange"
      >
      </el-cascader>
    </el-form-item>
    <el-form-item label="人员名称" prop="owner">
      <el-select-v2 v-model="form.owner" placeholder="请选择" filterable :options="userList" clearable></el-select-v2>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, getCurrentInstance, computed } from 'vue'
import { commonStore } from '@/common/store/modules/common'
interface State {
  form: any
  rules: Record<string, unknown>
  agents: Record<string, unknown>[]
}
export default defineComponent({
  name: 'DistributeForm',
  components: {},
  setup() {
    const state: State = reactive({
      form: {
        department: '',
        owner: ''
      },
      rules: {
        owner: [{ required: true, trigger: 'change', message: '请选择人员' }]
      },
      agents: [], // 服务组下的人员
      props: {
        label: 'name',
        value: '_id',
        emitPath: false,
        checkStrictly: true
      }
    })

    const instance: any = getCurrentInstance()

    const commonModule = commonStore()

    const userList = computed(() => {
      const agentObj: any = commonModule.publicCache.userCacheObj || {}
      let arr: any = [] // 存储人员
      if (state.form.department) {
        arr = state.agents.map((v: any) => {
          const obj: any = agentObj[v.agentId]
          if (obj) {
            return {
              label: obj.agentName + '[' + obj.agentNumber + ']',
              value: obj._id
            }
          }
        })
      } else {
        arr = commonModule.publicCache.userCache.map((item: any) => {
          return {
            label: item.agentName + '[' + item.agentNumber + ']',
            value: item._id
          }
        })
      }
      return arr
    })

    const groupObj: any = computed(() => {
      return commonModule.publicCache.groupCacheObj || {}
    })

    const handlePartChange = (val: string) => {
      state.form.owner = ''
      if (val) {
        state.agents = groupObj.value[val].members || [] // 服务下的成员
      }
    }

    const checkForm = async () => {
      let status = false
      await instance?.refs.formRef.validate((valid: boolean) => {
        status = valid
      })
      console.log(status, state.form, '00--')
      return {
        status,
        form: state.form
      }
    }

    const groups = computed(() => {
      return commonStore().publicCache.groupCache || []
    })

    const clearData = () => {
      state.form = { department: '', owner: '' }
    }

    return {
      handlePartChange,
      checkForm,
      userList,
      groups,
      clearData,
      ...toRefs(state)
    }
  }
})
</script>

<style lang="stylus" scoped>
:deep(.el-cascader)
  width 100%
.el-select-v2
  width 100%
.el-form-item[role='group']
  margin-right 0 !important
</style>
